<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="uname" label="用户" align="center" width="150" />
      <el-table-column prop="duties" label="职务" align="center" :formatter="fmtRole" width="150" />
      <el-table-column prop="sname" label="门店" align="center" width="600" />
      <el-table-column label="月份" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.sdate | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="原因" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-input v-model="row.details" size="mini" />
        </template>
      </el-table-column>
      <el-table-column label="得分" align="center" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.score" :precision="2" :step="1" size="mini" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="100px"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            plain
            @click="marking(row)"
          >
            提交分数
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>
</template>
<script>
import { getList, setScore } from '@/api/ym'
import Pagination from '@/components/Pagination'
import dayjs from 'dayjs'
import { systemRoles, getRoleName } from '@/utils/enum/roles'

export default {
  components: { Pagination },
  filters: {
    parseTime (time) {
      return dayjs(time).format('YYYY-MM')
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        page: 1,
        limit: 13
      },
      total: 0,
      listLoading: true
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    marking (row) {
      setScore(row).then(res => {
        this.$notify({
          title: res.data.message,
          message: res.data.status,
          type: 'success',
          duration: 2000
        })
      })
    },
    fetchData () {
      this.listLoading = true
      getList(this.listQuery.page, this.listQuery.limit).then(res => {
        this.list = res.data.data.records
        this.total = res.data.data.total
        this.listLoading = false
      })
    },
    fmtRole (row) {
      const tmp = getRoleName(row.duties);
      return tmp === undefined ? '' : tmp;
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
